{% extends "admin/base.html" %}


{% block content_main %}
<form class="layui-form" action="/classes/add_classes" method="post">
  <div class="layui-form-item">
    <label class="layui-form-label">添加课程</label>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">任课老师</label>
    <div class="layui-input-block">
      <select name="teacher">
          <option value=""></option>
          {% for i in teacher %}
            <option value="{{ i.id }}">{{ i.name }}</option>
          {% endfor %}
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">课程名字</label>
    <div class="layui-input-block">
      <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入课程名字" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">教室</label>
    <div class="layui-input-block">
      <input type="text" name="room" lay-verify="required" autocomplete="off" placeholder="请输入教室" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">上课时间</label>
    <div class="layui-input-block">
      <input type="text" name="time" lay-verify="required" autocomplete="off" placeholder="请输入上课时间" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">部门</label>
    <div class="layui-input-block">
      <input type="text" name="department" lay-verify="required" autocomplete="off" placeholder="请输入部门" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-block">
      <button class="layui-btn" type="submit">提交</button>
    </div>
  </div>
</form>
{% endblock %}


{% block script %}
<script>
layui.use(['form', 'util', 'laydate'], function(){
  var form = layui.form;
  var layer = layui.layer;
  var util = layui.util;
  var laydate = layui.laydate;

  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });

  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [
      /^[\S]{6,12}$/
      ,'密码必须6到12位，且不能出现空格'
    ]
  });

  //指定开关事件
  form.on('switch(switchTest)', function(data){
    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
  });

  //提交事件
  form.on('submit(demo1)', function(data){
    alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });

  //表单赋值
  layui.$('#LAY-component-form-setval').on('click', function(){
    form.val('example', {
      "username": "贤心" // "name": "value"
      ,"password": "123456"
      ,"interest": 1
      ,"like[write]": true //复选框选中状态
      ,"close": true //开关状态
      ,"sex": "女"
      ,"desc": "我爱 layui"
    });
  });

  //表单取值
  layui.$('#LAY-component-form-getval').on('click', function(){
    var data = form.val('example');
    alert(JSON.stringify(data));
  });
  // 普通事件
  util.on('lay-on', {
    // 获取验证码
    "get-vercode": function(othis){
      var isvalid = form.validate('.demo-phone'); // v2.7.0 新增
      // 验证通过
      if(isvalid){
        layer.msg('手机号验证通过，执行发送验证码的操作');
      }
    }
  });

});
</script>
{% endblock %}
